<template>
  <div>
    <!-- 第一排 -->
    <div class="row">
      <div class="data1">
        <div class="name">水贝金</div>
        <div class="textR">859.16</div>
        <div>点差：1</div>
      </div>
      <div class="data2">
        <div class="name flex1">上期</div>
        <div class="textR flex1">86678</div>
        <div class="flex1 textR">点差：0.02</div>
      </div>
      <div class="data3">
        <div class="name" style="flex: 1">MT4</div>
        <div class="textR" style="flex: 2">86678</div>
        <div class="textR" style="flex: 2">86678</div>
        <div style="flex: 2" class="textR">点差：0.02</div>
      </div>
    </div>
    <!-- 第二排 -->

    <div class="row">
      <div style="flex: 1"></div>
      <div class="data2">
        <div class="name flex1">基差</div>
        <div class="textR flex1">86678</div>
        <div class="flex1 textR" style="color: red">+1.5</div>
      </div>
      <div class="data3">
        <div class="name" style="flex: 1">基差</div>
        <div class="textR" style="flex: 2"></div>
        <div class="textR" style="flex: 2">13.22315</div>
        <div style="flex: 2; color: red" class="textR">+1.5</div>
      </div>
    </div>
    <!-- 第三排 -->

    <div class="row">
      <div class="data1">
        <div class="name">汇率</div>
        <div class="textR">7.12</div>
        <div></div>
      </div>
      <div class="data2">
        <div class="flex1">基差5日均值</div>
        <div class="flex1 textR">5.88</div>
        <div class="flex1"></div>
      </div>
      <div class="data3">
        <div class="name" style="flex: 3">基差5日均值</div>
        <div class="textR flex1" style="flex: 2">86678</div>
        <div class="flex1" style="flex: 2"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
};
</script>
<style scoped lang="scss">
.row {
  display: flex;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .data1,
  .data2,
  .data3 {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
      pointer-events: none;
    }
    
    div {
      flex: 2;
      height: 50px;
      line-height: 50px;
      padding: 0 12px;
      font-size: 0.8em;
      white-space: nowrap;
      overflow: hidden;
      font-weight: 600;
      color: #2c3e50;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
    }

    .name {
      flex: 1;
      font-weight: 700;
      font-size: 0.9em;
      color: #34495e;
    }
    
    .flex1 {
      flex: 1;
    }
  }

  .data1 {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    border-right: 2px solid rgba(255,255,255,0.2);
    
    .name {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    div {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
  }
  
  .data2 {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-right: 2px solid rgba(255,255,255,0.2);
    
    .name {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    div {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
  }
  
  .data3 {
    background: linear-gradient(135deg, #27ae60, #229954);
    
    .name {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    div {
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
  }
  
  .textR {
    text-align: right;
    justify-content: flex-end;
  }
  
  // 特殊样式处理
  div[style*="color: red"] {
    color: #ff6b6b !important;
    font-weight: 700;
    animation: pulse 2s infinite;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

// 响应式优化
@media (max-width: 768px) {
  .row {
    .data1,
    .data2,
    .data3 {
      div {
        height: 45px;
        line-height: 45px;
        padding: 0 8px;
        font-size: 0.75em;
      }
    }
  }
}
</style>
